<template>
    <div >
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>{{dialogData.title}}</span>
        </div>
        <el-row style="width:920px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="19">
             <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="84px" class="addForm">
                <el-row style="padding: 0 40px;margin-top:30px" :gutter="20">
                  
                      <el-col :span="16">
                        <el-form-item label="报销内容:" prop="reimbursementContent">
                          <el-input size="small" type="textarea" v-model="parames.reimbursementContent" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                          <el-form-item label="审批人:" prop="reviewerId">
                            <userTree v-model="parames.reviewerId" :currentValue="parames.reviewerId"></userTree>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="支出附件:">
                          <el-upload
                            class="upload-demo"
                            multiple
                            :headers="myHeaders"
                            :action="fileAction"
                            :on-success="handleSucess"
                            :on-remove="handleRemove"
                            :file-list="file">
                            <el-button icon="el-icon-upload2" type="primary" plain style="width: 400px">点击上传</el-button>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
              <div v-if="dialogData.type == 'edit'">
                <el-button
                  @click="handleCancle"
                  size="small"
                  icon="el-icon-close"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >取消编辑</el-button>
              </div>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
    </div>
</template>

<script>
export default {
    props: ['dialogData'],
    data() {
        return {
          parames: {
            id: '',
            reimbursementContent: '',
            reviewerId: '',
            attachmentSet:[],
          },
          fileList: [],
          file: [],
          loadingBtn: false,
          myHeaders: {authorization: ''},
          fileAction: this.$api.postReimbursementUploadCertificate, //附件上传地址
          rules: {
            reimbursementContent: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            reviewerId: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
          },
        };
    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      handleCancle () { //取消重新编辑
        this.dialogData.show = false
        this.$emit('checkOpen')
      },
      handleSucess (response,fileList) { //上传附件成功返回url
        this.fileList.push({
            name: response.data.name,
            url: response.data.url
        })
      },
      handleRemove (file) { //删除附件更新
          this.fileList.forEach((el,index)=>{
              if (file.response) {
                  if (el.url == file.response.data.url) {
                      this.fileList.splice(index, 1)
                  }
              } else {
                  if (el == file.url) {
                      this.fileList.splice(index, 1)
                  }
              }
          })
      },
      setData () {
        this.parames.attachmentSet = this.fileList
      },
      handleSave () { //保存
        this.$refs['parames'].validate((valid) => {
          if (valid) {
            this.setData()
            this.loadingBtn = true
            if (this.dialogData.type == 'edit') { //修改保存成功
            } else { //新增
              this.$post(this.$api.postReimbursementAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            setTimeout(() => {
              this.loadingBtn = false
            }, 300);
          }
        })
      },
      render () { //获取详情信息
    
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.parames.expenditureCause = '' //支出事由,

        this.parames.attachmentSet = []
        this.file = []
       this.$refs.parames.resetFields()
      }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
  left: 15px;
}
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header{
  background: #fafafa;
}
#addHet .ant-collapse > .ant-collapse-item{
  border-bottom: #f7f7f7 solid 1px!important;
}
</style>
